<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        td{
            padding: 2px 0px;
            text-align: left;
            border: 1px solid #999;
        }
    </style>
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js"></script>
    <script type="text/javascript" src="/resources/js/md5.js"></script>
    <script type="text/javascript" src="/resources/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/resources/js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="/resources/js/Util.js?v=2"></script>
    <script type="text/javascript" src="/resources/js/idCardUtil.js"></script>
</head>
<body>
<input type="hidden" id="id" name="id"
       class="form-control form-data ">
<table> <tr>
    <td colspan="11">
        <button onclick="back()" class="btn btn-primary" type="button" style="float:right;margin-right:20px;">返回</button>
    </td>
</tr>

    <tr>
        <td width="11%"><span style="color: red">*</span>姓名</td>
        <td width="11%">
            <input type="text" id="name" name="name"
                   class="form-control form-data ">
        </td>
        <td width="11%">
            别名
        </td>
        <td width="11%">
            <input type="text" id="alias" name="alias"
                   class="form-control form-data ">
        </td>
        <td width="11%">
            <span style="color: red">*</span>性别
        </td>
        <td width="11%">
            <select name="sex" id="sex" class="form-control form-data">
                <option value="secrecy">保密</option>
                <option value="man">男</option>
                <option value="woman">女</option>
            </select>
        </td>
        <td width="11%">
            出生年月
        </td>
        <td width="11%">
            <input type="text" id="brithday" name="brithday" class="form-control form-data"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})">
        </td>
        <td width="12%" rowspan="5">
            <img id="imgHeadImg" onclick="$('#upload').click();"
                 style="height:160px;width: 150px;"
                 src="/resources/images/user_pic-225x225.png"   />
            <input id="headImg" class="form-data" type="hidden"/>
            <input type="file" id="upload" multiple="true" accept="image/*"  name="file" onchange="uploadFileL()"
                   value="Upload your resume"
                   style="display: none !important;opacity: 0;width: 0px;">
        </td>
    </tr>
    <tr>
        <td>
            文化程度
        </td>
        <td>
            <select name="educationLevel" id="educationLevel" class="form-control form-data">
                <option value="level0">小学以下</option>
                <option value="level1">小学</option>
                <option value="level2">初中</option>
                <option value="level3">中专/高中</option>
                <option value="level4">专科</option>
                <option value="level5">本科</option>
                <option value="level6">硕士</option>
                <option value="level7">博士</option>
            </select>
        </td>
        <td>
            民族
        </td>
        <td>
            <input type="text" id="ethnic" name="ethnic"
                   class="form-control form-data ">
        </td>
        <td>
            工作性质
        </td>
        <td>
            <input type="text" id="natureOfWork" name="natureOfWork"
                   class="form-control form-data ">
        </td>
        <td>
            从业时间
        </td>
        <td>
            <input type="text" id="workYears" name="workYears" class="form-control form-data"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})">
        </td>
    </tr>
    <tr>
        <td rowspan="1">
            籍贯
        </td>
        <td rowspan="1" colspan="7">
            <input type="text" id="nativePlace" name="nativePlace"
                   class="form-control form-data ">
        </td>

    </tr>
    <tr>
        <td colspan="1">
            户籍地址
        </td>
        <td colspan="7">
            <input type="text" id="nativeAddress" name="nativeAddress"
                   class="form-control form-data ">
        </td>
    </tr>
    <tr>

        <td colspan="1">
            现在住址
        </td>
        <td colspan="7">
            <input type="text" id="address" name="address"
                   class="form-control form-data ">
        </td>
    </tr>
    <tr>
        <td>人员类型</td>
        <td colspan="6">
            <input type="checkbox" value="true" id="securityPeople" name="securityPeople"> <span style="padding-left:5px ">保卫人员</span>
            <input type="checkbox" value="true" id="securityMainPeople" name="securityMainPeople"> <span style="padding-left:5px ">保卫负责人</span>
            <input type="checkbox" value="true" id="purchasePeople" name="purchasePeople"> <span style="padding-left:5px ">采购人员</span>
            <input type="checkbox" value="true" id="purchaseMainPeople" name="purchaseMainPeople"> <span style="padding-left:5px ">采购负责人</span>
            <input type="checkbox" value="true" id="seller" name="seller"> <span style="padding-left:5px ">销售人员</span>
            <input type="checkbox" value="true" id="mainSeller" name="mainSeller"> <span style="padding-left:5px ">销售负责人</span>
            <input type="checkbox" value="true" id="otherPeople" name="otherPeople"> <span style="padding-left:5px ">其他</span>
        </td>
        <td>状态</td>
        <td>
            <input type="radio" class="form-data " style="display: inline;" name="status" value="valid"  /> 在职
            <input type="radio" class="form-data  " style="display: inline;" name="status" value="invalid"/>离职
        </td>

    </tr>
    <tr>
        <td>
            服务单位
        </td>
        <td colspan="3">
            <input type="text" id="company" name="company"
                   class="form-control form-data ">
        </td>

        <td>
            <span style="color: red">*</span> 现在职务
        </td>
        <td colspan="4">
            <input type="text" id="position" name="position"
                   class="form-control form-data ">
        </td>


    </tr>

    <tr>
        <td>
            政治面貌
        </td>
        <td colspan="3">
            <input type="text" id="roleForPolitical" name="roleForPolitical"
                   class="form-control form-data ">
        </td>
        <td >
            <span style="color: red">*</span>联系方式
        </td>
        <td colspan="4" >
            <input type="text" id="telephone" name="telephone"
                   class="form-control form-data ">
        </td>
    </tr>
    <tr>
        <td>
            <span style="color: red">*</span>身份证号
        </td>
        <td colspan="3">
            <input type="text" id="idCard" name="idCard"
                   data-type="idCard"
                   class="form-control form-data ">
        </td>
        <td>
            暂住证号
        </td>
        <td colspan="4">
            <input type="text" id="tempLiveNo" name="tempLiveNo"
                   class="form-control form-data ">
        </td>
    </tr>
    <tr>
        <td rowspan="2">
            资格证书
        </td>
        <td colspan="2">
            颁发机构
        </td>
        <td colspan="2">
            <input type="text" id="authorizedUnit" name="authorizedUnit"
                   class="form-control form-data ">
        </td>
        <td rowspan="2">
            <button class="btn btn-primary" onclick="$('#file_input').click();" >
                上传文件
            </button>
        </td>
        <td rowspan="2" colspan="3">
            <div  id="file_div" style="margin-top: 20px;" >
            </div>
            <input type="file" id="file_input" name="file" onchange="uploadFile('file')" value="Upload your resume"
                   style="opacity: 0;width: 0px;display: none">

        </td>

    </tr>
    <tr>
        <td colspan="2">
            编号
        </td>
        <td colspan="2">
            <input type="text" id="authorizedNo" name="authorizedNo"
                   class="form-control form-data ">
        </td>
    </tr>
    <tr>
        <td rowspan="2" id="zy_family_rowspan">
            主要家庭成员
        </td>
        <td colspan="2">
            姓名
        </td>
        <td colspan="1">
            年龄
        </td>
        <td colspan="2">
            称谓
        </td>
        <td colspan="2">
            身份证号码
        </td>
        <td colspan="1"><button onclick="addFamily()">添加</button></td>
    </tr>
    <tr class="family-content">
        <td colspan="2">
            <input type="text" name="rName"
                   class="form-control form-data ">
        </td>
        <td colspan="1">
            <input type="text" name="rAge" readonly
                   class="form-control ">
        </td>
        <td colspan="2">
            <input type="text" name="rCall"
                   class="form-control form-data ">
        </td>
        <td colspan="2">
            <input type="text"  name="rIdCard"
                   data-type="idCard" for-age="rAge"
                   class="form-control form-data ">
        </td>
        <td colspan="1">
            <button class="family-remove">删除</button>
        </td>
    </tr>
    <!--<tr>
        <td colspan="2">
            <input type="text" id="rTwoName" name="rTwoName"
                   class="form-control form-data ">
        </td>
        <td colspan="1">
            <input type="text" id="rTwoAge" name="rTwoAge" readonly
                   class="form-control">
        </td>
        <td colspan="2">
            <input type="text" id="rTwoCall" name="rTwoCall"
                   class="form-control form-data ">
        </td>
        <td colspan="2">
            <input type="text" id="rTwoIdCard" name="rTwoIdCard"
                   data-type="idCard" for-age="rTwoAge"
                   class="form-control form-data ">
        </td>
        <td colspan="1">
            <button class="family-remove">删除</button>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="text" id="rThreeName" name="rThreeName"
                   class="form-control form-data ">
        </td>
        <td colspan="1">
            <input type="text" id="rThreeAge" name="rThreeAge" readonly
                   class="form-control ">
        </td>
        <td colspan="2">
            <input type="text" id="rThreeCall" name="rThreeCall"
                   class="form-control form-data ">
        </td>
        <td colspan="2">
            <input type="text" id="rThreeIdCard" name="rThreeIdCard"
                   data-type="idCard"  for-age="rThreeAge"
                   class="form-control form-data ">
        </td>
        <td colspan="1">
            <button class="family-remove">删除</button>
        </td>
    </tr>-->
    <tr class="family-content-after">
        <td>
            何时何地受过何种奖励、处分
        </td>
        <td colspan="8">
            <textarea class="form-control form-data" name="assess" rows="3" placeholder=""></textarea>
        </td>
    </tr>
    <tr>
        <td>
            何时何地参加过何种业务培训
        </td>
        <td  colspan="8">
            <textarea class="form-control form-data" name="training" rows="3" placeholder=""></textarea>
        </td>
    </tr>
    <tr>
        <td>
            简历
        </td>
        <td  colspan="8">
            <textarea class="form-control form-data" name="resume" rows="3" placeholder=""></textarea>
        </td>
    </tr>
    <tr>
        <td>
            备注
        </td>
        <td  colspan="8">
            <textarea class="form-control form-data" name="remark" rows="3" placeholder=""></textarea>
        </td>
    </tr>

    <tr>
        <td colspan="9">
            <button onclick="save()" class="btn btn-success" id="saveBtn">提交</button>
            <!--<button onclick="back()" class="btn btn-primary" type="button">返回</button>-->
        </td>

    </tr>

</table>
</body>
<script type="text/javascript">
    $(function () {
        initData();
        idCardToAge();
    });

    function idCardToAge() {
        $("[data-type='idCard']").blur(function () {
            /*debugger*/
            var idCard = $(this).val();
            if(!IdentityCodeValid(idCard)){
                /*$(this).focus();*/
                $(this).val("");
                $(this).attr("placeholder","身份证错误");
            }else if(typeof($(this).attr("for-age"))!=="undefined"){
                var ageId = $(this).attr('for-age');
                var age=  GetAge(idCard);
                $(this).parent().parent().find("input[name='"+ageId+"']").val(age);
//                $("#"+ageId).val(age);
            }
        })
    }

    function initData(){
        var data = getData();
        if(null2empty(data.id) !==""){

            var id = data.id;
            $("input[name='id']").val(id);
            $.ajax({
                url:"/company/practitioner/find.do",
                data:{'id':id},
                type:'post',
                dataType:'json',
                success:function(data){
                    console.log(data);
                    if(data.success){
                        initPageDate(data.data, '.form-data');
                        addFileInfoToTable(data.data.fileInfoList,'file');

                        var familyJson = data.data.familyJson;
                        if(!isNullOrUndefined(familyJson)){
                            var familys = JSON.parse(familyJson);
                            var html = "";
                            $(".family-content").remove();
                            $(familys).each(function (index,item) {
                                var rName =  item.rName;
                                var rAge = item.rAge;
                                var rCall = item.rCall;
                                var rIdCard = item.rIdCard;
                                html = html + '<tr class="family-content">'+
                                        '<td colspan="2"><input type="text" name="rName" value="'+rName+'" class="form-control form-data "></td>'+
                                        '<td colspan="1"><input type="text" name="rAge" readonly class="form-control "></td>'+
                                        '<td colspan="2"><input type="text" name="rCall" value="'+rCall+'" class="form-control form-data "></td>'+
                                        '<td colspan="2"><input type="text"  name="rIdCard" value="'+rIdCard+'" data-type="idCard" for-age="rAge" class="form-control form-data "></td>'+
                                        '<td colspan="1"><button class="family-remove">删除</button></td>'+
                                        '</tr>';
                            });

                            $(html).insertBefore(".family-content-after");
                            idCardToAge();
                            familyRemoveBind();
                            czZyFamilyRowspan();
                        }

                        $("[data-type='idCard']").each(function (index,element) {
                             var idCard = $(element).val();
                             if(IdentityCodeValid(idCard)&&typeof($(element).attr("for-age"))!=="undefined"){
                                 var ageId = $(element).attr('for-age');
                                 var age=  GetAge(idCard);
                                 $(element).parent().parent().find("input[name='"+ageId+"']").val(age);
//                                 $("#"+ageId).val(age);
                             }

                        })
                        $("#imgHeadImg").attr("src",data.data.photo);

                        if(data.data.securityPeople == "valid") {
                            $("#securityPeople").prop("checked", "checked");
                        }
                        if(data.data.securityMainPeople == "valid") {
                            $("#securityMainPeople").prop("checked", "checked");
                        }
                        if(data.data.purchasePeople == "valid") {
                            $("#purchasePeople").prop("checked", "checked");
                        }
                        if(data.data.purchaseMainPeople == "valid") {
                            $("#purchaseMainPeople").prop("checked", "checked");
                        }
                        if(data.data.seller == "valid") {
                            $("#seller").prop("checked", "checked");
                        }
                        if(data.data.mainSeller == "valid") {
                            $("#mainSeller").prop("checked", "checked");
                        }
                        if(data.data.otherPeople == "valid") {
                            $("#otherPeople").prop("checked", "checked");
                        }
                        $("#name").attr("readonly","readonly");
                        $("#sex").attr("disabled","disabled");
                        $("#idCard").attr("readonly","readonly");
                        $("#address").attr("readonly","readonly");
                        $("#nativeAddress").attr("readonly","readonly");
                        $("#position").attr("readonly","readonly");


                        // $("#saveBtn").hide();
                        // $("input,textarea,select").attr("disabled",'disabled');
                    }
                }
            });
            $("#account").attr('readonly','readonly');
        }else{
            $("input[name='status']:first").prop("checked",'checked');
        }
    }
    function save() {
        var params = getPageDataByClass("form-data");
        if (strIsNull(params['name'])) {
            alert("请输入名称");
            return;
        }
        if(strIsNull(params['nativeAddress'])){
            alert("请输入户籍地址");
            return;
        }
        if(strIsNull(params['address'])) {
            alert("请输入现在住址");
            return;
        }
        if(strIsNull(params['position'])) {
            alert("请输入现在职务");
            return;
        }
        if(strIsNull(params['telephone'])) {
            alert("请输入联系方式");
            return;
        }
        if(strIsNull(params['idCard'])) {
            alert("请输入身份证号") ;
            return;
        }
        var familyJson = getFamilyJson();
        params['familyJson']= familyJson;

        var securityPeople = "invalid";
        if($("#securityPeople").prop("checked")) {
            securityPeople = "valid";
        }

        params['securityPeople'] = securityPeople;

        var securityMainPeople = "invalid";
        if($("#securityMainPeople").prop("checked")) {
            params['securityMainPeople'] = 'valid';
        }
        var purchasePeople = "invalid";
        if($("#purchasePeople").prop("checked")) {
            params['purchasePeople'] = 'valid';
        }
        var purchaseMainPeople = "invalid";
        if($("#purchaseMainPeople").prop("checked")) {
            params['purchaseMainPeople'] = 'valid';
        }
        var seller = "invalid";
        if($("#seller").prop("checked")) {
            params['seller'] = 'valid';
        }
        var mainSeller = "invalid";
        if($("#mainSeller").prop("checked")) {
            params['mainSeller'] = 'valid';
        }
        var otherPeople = "invalid";
        if($("#otherPeople").prop("checked")){
            otherPeople = "valid";
        }
        params['otherPeople'] = otherPeople;
        var img = $("#imgHeadImg").attr("src");
        params['photo']= img;
        params.qualificationDoc = "";
        $("input[name='file_id']").each(function(index,files){
            if(files == "") {
                params.qualificationDoc = $(this).val();
            } else {
                params.qualificationDoc = params.qualificationDoc + "," + $(this).val();
            }
        });
        $.ajax({
            url: "/company/practitioner/save.do",
            data: params,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                if (data.success) {
                    alert("保存成功");
                    goto("practitioner_list.html");
                } else {
                    alert(data.msg);
                }
            }
        });
    }
    function back() {
        goto("practitioner_list.html");
    }
    function uploadFileL() {
        $.ajaxFileUpload({
            url: "/uploadImage.do?_t=" + new Date().getTime(),            //需要链接到服务器地址
            secureuri: false,//是否启用安全提交，默认为false
            fileElementId: 'upload',                        //文件选择框的id属性
            dataType: 'json',                                     //服务器返回的格式，可以是json, xml
            success: function (data, status) {//服务器成功响应处理函数
                var url =data.data;
                setImg(url);

            }
        });
    }
    function uploadFile(fileType) {
        $.ajaxFileUpload({
            url: "/file/uploadFile.do?_t=" + new Date().getTime(),            //需要链接到服务器地址
            secureuri: false,//是否启用安全提交，默认为false
            fileElementId: fileType+'_input',                        //文件选择框的id属性
            dataType: 'text',                                     //服务器返回的格式，可以是json, xml
            success: function (data, status) {//服务器成功响应处理函数
                var rpeObj = $.parseJSON(data);
                var fileInfoList = rpeObj.data;
                addFileInfoToTable(fileInfoList,fileType);
            }
        });
    }
    function addFileInfoToTable(fileInfoList,fileType){
        $(fileInfoList).each(function(index,file){
            var fileHtml = "<div  style='border-radius: 2px; width:100%;height:100px;float: left; border: 2px #ffffff solid;'>"+

                "<div align='center' style='height:80px;margin-bottom: 0px;'>"+
                "<div align='center' onclick='downLoadFile(\""+file.path+"\",\""+file.name+"\")' ><input type='hidden' name='"+fileType+"_id' value='"+file.id+"'>"+file.name+"</div>"+

                "<button  style='margin-left: 20px;' " +
                "onclick='downLoadFile(\""+file.path+"\",\""+file.name+"\")' " +
                "name='download' extendData='"+file.id+"'class='btn btn-primary'>下载</button>"+
                "<button  style='margin-left: 20px;' name='delete' extendData='"+file.id+"'class='btn btn-primary'>删除</button><div>"
            "</div>";
            $("#"+fileType+"_div").html(fileHtml);

        });
        $("button[name='delete']").unbind('click');
        $("button[name='delete']").click(function(){
            var id = $(this).attr("extendData");
            $.ajax({
                type: "POST",
                url: "/file/delete.do?_t=" + new Date().getTime(),
                data: "fileId=" + id,

                success: function (result) {
                    alert("删除成功");
                },

                error: function (XMLHttpRequest, textStatus, thrownError) {
                    /* alert("系统异常");*/
                }
            });
            $(this).parent().parent().remove();
        });
    }
    function setImg(url){
        $("#imgHeadImg").attr('src',url);
        $("#headImg").val(url);
    }
    function downLoadFile(url,name) {
        var $a = $("<a></a>").attr("href", url).attr("download", name);
        $a[0].click();
    }


    function familyRemoveBind() {
        $(".family-remove").click(function () {
            $(this).parentsUntil("tr").parent().remove();
            czZyFamilyRowspan();
        });
    }

    function czZyFamilyRowspan() {
        var size = $(".family-content").length;
        $("#zy_family_rowspan").attr("rowspan", size + 1);
    }
    function addFamily() {
        var html = '<tr class="family-content">'+
                    '<td colspan="2"><input type="text" name="rName" class="form-control form-data "></td>'+
                    '<td colspan="1"><input type="text" name="rAge" readonly class="form-control "></td>'+
                    '<td colspan="2"><input type="text" name="rCall"class="form-control form-data "></td>'+
                    '<td colspan="2"><input type="text"  name="rIdCard" data-type="idCard" for-age="rAge" class="form-control form-data "></td>'+
                    '<td colspan="1"><button class="family-remove">删除</button></td>'+
                    '</tr>';
        $(html).insertBefore(".family-content-after");
        czZyFamilyRowspan();
        familyRemoveBind();
        idCardToAge();
    }
    function getFamilyJson() {
        var familyArray = new Array();
        $(".family-content").each(function (index,item) {

            var rName = $(this).find("input[name='rName']").val();
            var rAge = $(this).find("input[name='rAge']").val();
            var rCall = $(this).find("input[name='rCall']").val();
            var rIdCard = $(this).find("input[name='rIdCard']").val();
            familyArray.push({"rName":rName,"rAge":rAge,"rCall":rCall,"rIdCard":rIdCard});
        });
        return JSON.stringify(familyArray);
    }
</script>
</html>